<template>
	<view class="pages-rule rel">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="升级规则" leftIcon="icon-left"
			color="#ffffff" :backgroundColor="primaryColor">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<!-- #endif -->
		<view class="fill-base prompt">
			<view class="flex-y-center">
				<i class="iconfont iconbeizhu" :style="{color: primaryColor,fontSize: '22px'}"></i>
				<text class="f-ms-title pl-md" :style="{color: primaryColor}">提示</text>
			</view>
			<view class="pt-md f-ms-title " :style="{color: primaryColor}">
				师傅等级是根据你的业绩来决定的，每一季度1号会考核上一季度的业绩，根据上一季度业绩决定本季度的等级分佣
			</view>
		</view>
		<view class="rule-box fill-base">
			<view class="fill-base radius-10 rule-cont rel">
				<view class="flex-center h-110 rel" style="border-bottom: 1px solid #FFD2B3; z-index: 1;" v-for="(item,index) in list" :key="index">
					<view class="f-mini-title first-span rel flex-y-center">{{item.title}}<text class="c-caption" v-if="item.unit">{{item.unit}}</text></view>
					<view class="f-mini-title flex-center flex-1 rel">{{item.first}}</view>
					<view class="f-mini-title flex-center flex-1 rel">{{item.two}}</view>
					<view class="f-mini-title flex-center flex-1 rel">{{item.thr}}</view>
				</view>
				<view class="rule-bg flex abs">
					<view class="first-span"></view>
					<view class="first flex-1"></view>
					<view class="two flex-1"></view>
					<view class="thr flex-1"></view>
				</view>
				
			</view>
		</view>
		
		
		
		
		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import tabbar from "@/components/tabbar.vue"
	
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				list: [
					{title: '项目', first: '普通', two: '中级', thr: '高级'},
					{title: '分佣比例',unit: '(10%)', first: '50', two: '90', thr: '40'},
					{title: '在线时长',unit: '(小时)', first: '50', two: '90', thr: '40'},
					{title: '服务时长',unit: '(小时)', first: '50', two: '90', thr: '40'},
					{title: '接单率',unit: '(%)', first: '50', two: '90', thr: '40'},
					{title: '退单率',unit: '(%)', first: '50', two: '90', thr: '40'},
					{title: '好评率',unit: '(%)', first: '50', two: '90', thr: '40'}
				]
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo
		}),
		async onLoad(options) {
			this.initIndex()
		},
		async onShow() {},
		async onReachBottom() {},
		methods: {
			...mapActions(['getConfigInfo']),
			async initIndex(refresh = false){
				if(!this.configInfo.id || refresh){
					this.getConfigInfo()
				}
			}
		},
	}
</script>


<style lang="scss">
	.pages-rule {
		.prompt{
			padding: 30rpx 50rpx
		}
		.rule-box{
			padding: 40rpx 20rpx;
			margin-top: 40rpx;
			.rule-cont{
				overflow: hidden;
				border: 1px solid #FFD2B3;
				border-bottom-color: transparent;
				.first-span{
					flex: 1.6;
					padding-left: 30rpx;
				}
				.first{
					height: 100%;
					background: linear-gradient(360deg, rgba(240,255,255,0) 0%, #DDFFFF 100%);
				}
				.two{
					height: 100%;
					background: linear-gradient(360deg, rgba(255,250,240,0) 0%, #FFF1DD 100%);
				}
				.thr{
					height: 100%;
					background: linear-gradient(360deg, rgba(255,242,240,0) 0%, #FFE1DD 100%);
				}
			}
			.rule-bg{
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				border-radius: 10rpx;
				overflow: hidden;
			}
		}
		
	}
</style>
